<template>
	<view class="baseForm">
		<view class="overhidden">
			<view>
				<!-- 条码录入 -->
				<!-- <view class="searchScan_div">
					<scan-bar
						ref="scanBarRef"
						placeholder="请扫描或输入模具编号"
						@code-scanned="getScanResult"
						:key="datekey"></scan-bar>
				</view> -->
				<view class="upload-scan">
					<u-search
						v-model="searchText"
						shape="round"
						bgColor="#fff"
						:show-action="true"
						actionText="搜索"
						:animation="true"
						class="search"
						@search="searchList"
						@clear="searchList"
						@custom="searchList"></u-search>
					<u-icon
						name="scan"
						size="27px"
						:bold="false"
						@click="scanHandle"></u-icon>
				</view>
				<view>
					<view
						v-show="!taskInfo?.code && loading === false"
						class="flex justify-center font-14"
						style="margin: 30px 0 30px 0">
						暂无模具信息，请录入模具编号
					</view>
					<u-loading-icon
						class="flex justify-center mt-20"
						textSize="18"
						v-show="loading"></u-loading-icon>
					<!-- 录入成功 -->
					<view
						v-show="taskInfo?.code && loading === false"
						class="flex justify-center font-15 u-flex-column"
						style="margin: 30px 0 30px 0">
						<view class="flex justify-center">
							模具编号：{{ taskInfo?.code }}
						</view>
						<view class="mt-8 flex justify-center">
							<u-icon
								name="checkmark-circle-fill"
								size="18"
								color="#5ac725"
								class="u-m-r-10"></u-icon>
							扫描成功
						</view>
					</view>
					<!-- 模具详情 -->
					<!-- <ConsumablesDetachInfo v-if="taskInfo.code && taskInfo.projectMouldDTO" :taskInfo="taskInfo ?? {}"></ConsumablesDetachInfo> -->
					<!-- 提交 -->
					<view class="submit_btn_div">
						<button
							type="default"
							class="grey_btn"
							@click="resetFields">
							重 置
						</button>
						<button
							type="primary"
							:disabled="postLoading"
							:loading="postLoading"
							@click="submit"
							class="submit_btn">
							提 交
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, toRaw } from "vue";
import { onPageScroll, onShow, onLoad } from "@dcloudio/uni-app";
import ConsumablesDetachInfo from "@/pages/eam/mold/install/components/info.vue";
import { http } from "@/utils/http";
import ScanBar from "@/components/scan-bar/index.vue";
import { useEamStore } from "@/stores/useEamStore";
import { toScanCode } from "@/components/hs-scancode/scan.js";

// 刚进来 页面置顶
onLoad(() => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 0,
	});
});

// 初始化页面，获取检查详情
let taskInfo = ref<any>({});
const loading = ref(false);

// 选择设备信息
const deviceList = computed(() => JSON.parse(useEamStore().deviceList));
// 监控设备选择id
watch(
	() => deviceList,
	async (newVal) => {
		if (newVal.value[0]?.projectMouldDTO) {
			taskInfo.value = newVal.value[0];
		}
		setTimeout(() => {
			useEamStore().setDeviceList();
		}, 1000);
	},
	{
		deep: true,
		immediate: true,
	}
);

// 获取扫码结果
function getScanResult(result) {
	resetData();
	if (result) {
		// 检查模具是否符合查看设备条件
		getDeviceInfo(result);
	} else {
		uni.showToast({
			icon: "error",
			title: "请录入模具编号",
		});
	}
}

// 点击扫码
const searchText = ref("");
function scanHandle() {
	toScanCode({
		onlyFromCamera: true, // 只允许通过相机扫码
	})
		.then((res) => {
			uni.showToast({
				icon: "success",
				title: "扫码成功",
			});
			resetData();
			searchText.value = res;

			if (res) {
				getDeviceInfo(res);
			}
		})
		.catch((e) => {
			uni.showToast({
				icon: "error",
				title: e,
			});
		});
}

const searchList = () => {
	if (searchText.value) {
		getDeviceInfo(searchText.value);
	} else {
		resetData();
	}
};

// form信息重置
function resetData() {
	taskInfo.value = {};
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 100,
	});
}

// 重置表单信息 & 光标自动blur
const scanBarRef = ref();
const datekey = ref(new Date());
function resetFields() {
	resetData();
	scanBarRef.value.reset();
	datekey.value = new Date();
}

// 校验提交
const postLoading = ref(false);
async function submit() {
	if (!taskInfo.value.code) {
		uni.showToast({
			title: "请录入模具编号",
			icon: "none",
		});
		return false;
	}
	postLoading.value = true;
	const result: any = await http({
		method: "POST",
		url: `/eam/modInstallCheck/install`,
		data: toRaw(taskInfo.value),
	}).catch(() => {
		postLoading.value = false;
	});
	if (result?.code == 200) {
		uni.showToast({
			title: "安装成功",
		});
		setTimeout(() => {
			resetFields();
			postLoading.value = false;
		}, 500);
	}
}

// 获取模具信息（接口请求）
async function getDeviceInfo(consumeCode: string) {
	loading.value = true;
	const data: any = await http({
		method: "GET",
		url: `/eam/modInstallCheck/getProjectMouldlist/${consumeCode}`,
		data: {},
	}).catch(() => {
		loading.value = false;
		resetFields();
	});

	if (data?.data) {
		const result = JSON.parse(JSON.stringify(data?.data));
		taskInfo.value = result;
		console.log("result", result);
		// if (result?.mouldDTOS?.length) {
		// 存储数据，页面跳转
		// await useEamStore().setSelectedList(result);
		// jump('/eam/equip/install/euqListSelect');
		// } else {
		// 	uni.showToast({
		// 		title: '暂无设备信息',
		// 		icon: 'error'
		// 	});
		// 	resetFields()
		// }
	}
	loading.value = false;
}

// 网页跳转
function jump(item, id = "") {
	uni.navigateTo({
		url: id ? `/pages${item}?id=${id}` : `/pages${item}`,
		fail: () => {
			uni.showToast({
				title: "敬请期待",
				icon: "error",
			});
		},
	});
}
</script>

<style lang="scss" scoped>
.handle-ok {
	min-width: 75px;
	color: #19be6b;
}
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 8px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}

.overhidden {
	overflow: hidden;
}

.uni-table-th {
	font-size: 14px;
	font-weight: 400;
	color: #16254e;
}

uni-page-body {
	min-height: 100vh;
	height: 100%;
	background-color: #fbfbff;
}

.u-divider {
	margin: 10px 0;
}

.baseForm {
	background-color: #fbfbff;
	display: block;
	min-height: 100vh;
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 1px;
		display: flex;
		align-items: center;
		// box-shadow: 0 1px 10px 0px rgb(19 10 236 / 10%);
		.u-icon {
			margin-left: 8px;
		}
	}
}

.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}

.submit_btn {
	margin: 0px 20rpx 20rpx 10rpx;
}
.grey_btn {
	margin: 0px 10rpx 20rpx 20rpx;
	height: 45px;
	line-height: 45px;
}
.submit_btn_div {
	position: fixed;
	display: flex;
	align-items: center;
	width: 100%;
	bottom: 0;
	z-index: 10;
	uni-button {
		flex: 1;
		border-radius: 10px;
	}
}

.unitable {
	width: calc(100% - 20px);
	margin: 0 10px 70px;
	box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	border-radius: 4px;
}
</style>
